<!DOCTYPE html>
<html>
<head>
    <meta name="layout" content="main" />
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
    <g:set var="entityName" value="${message(code: 'estate.label', default: 'Estate')}" />
    <title>小区详情</title>
    <asset:stylesheet src="intelligence/swiper.css"/>
    <style>
    .contact-stat{
        padding: 8px 0px;
        text-align: center;
    }
    .contact-stat span{
        font-size: 13px;
        color: #88898c;
        margin-bottom: 10px;
    }
    .contact-stat strong{
        font-size: 13px;
        word-wrap: break-word;
    }
    .nav-tabs{
        border-bottom: none;
    }
    .hpanel > .panel-footer, .hpanel > .panel-section{
        background: #f9f9f9;
    }
    .flex{
        display: flex;justify-content: center;align-items: center;
    }
    .newFontSize{
        font-size: 12px;
    }
    table>tbody>tr>td, table>tbody>tr>th,.table>tfoot>tr>td, table>tfoot>tr>th, table>thead>tr>td, table>thead>tr>th{
        padding: 8px;
        line-height: 1.42857143;
        white-space: nowrap;
    }
    #address a:hover{
        color: #62CB31;
    }
    /*轮播图样式*/
    .swiper-container{
        width: 100%;
        height: 300px;
        margin-top: 10px;
    }
    .swiper-pagination-bullet-active{
        opacity: 0.6;
        background: #fff;
    }
    @media (max-width:1654px){
        #screenPage,#screenPage_1{
            height:162px;
        }
    }
    @media (max-width:1382px){
        #screenPage_2{
            height:477px;
        }
    }

    .footer.bg-success {
        background-color: #dff0d8;
    }
    </style>
</head>
<body class="fixed-navbar fixed-sidebar">

<div class="small-header">
    <div class="hpanel">
        <div class="panel-body">
            <div id="hbreadcrumb" class="pull-right navFloatRight">
                <ol class="hbreadcrumb breadcrumb">
                    <li>
                        <span>CINDATA PLS</span>
                    </li>

                    <li class="active">
                        <span>小区信息</span>
                    </li>
                </ol>
            </div>
        </div>
    </div>
</div>

<g:if test="${params?.message}">
    <div class="message alert alert-info" role="status">${params?.message}</div>
</g:if>

<g:if test="${flash.message}">
    <div class="message alert alert-info" role="status">${flash.message}</div>
</g:if>

<div class="content animate-panel">
    %{--押品信息--}%
    <div class="row">
        <div class="hpanel hgreen" style="">
            <div class="panel-heading">
                <div class="panel-tools">

                    <g:if test="${editRoleFlag && this?.collateral?.status != 'Failed'}">
                        <g:link action="estateEdit" id="${this?.estateDetail?.id}" class="btn btn-info btn-xs"><i class="fa fa-edit"></i>编辑</g:link>
                    </g:if>
                    
                    <a class="showhide"><i class="fa fa-chevron-up"></i></a>
                </div>
                小区信息
            </div>

            <div class="panel-body">
                <div class="col-md-12 text-center">
                    <div class="col-md-3" style="width: 20%">
                        <h3 class="font-extra-bold m-b-xs">
                            <small style="font-size: 16px;">预警处置 : </small>
                            <span class="unitPrice" style="color: #62CB31">小区级集中度</span>
                        </h3>
                        <p><small style="color: #62CB31">低于3.0分</small></p>
                    </div>
                    <div class="col-md-3" style="width: 20%">
                        <h3 class="font-extra-bold m-b-xs text-center">
                            <small style="font-size: 16px;">小区名称 :</small>
                            <span class="">${community?.communityName}</span>
                            <small class="newFontSize"></small>
                        </h3>
                    </div>
                    <div class="col-md-3" style="width: 20%">
                        <h3 class="font-extra-bold m-b-xs">
                            <small style="font-size: 16px;">小区地址 : </small>
                            <span class="">${community?.address}</span>
                            <small class="newFontSize"></small>
                        </h3>
                    </div>
                    <div class="col-md-3" style="width: 20%">
                        <h3 class="font-extra-bold m-b-xs text-center">
                            <small style="font-size: 16px;">用途性质 :</small>
                            <span class="totalPrice">住宅</span>
                            <small class="newFontSize"></small>
                        </h3>
                    </div>
                    <div class="col-md-3" style="width: 20%">
                        <h3 class="font-extra-bold m-b-xs">
                            <small style="font-size: 16px;">建成年份 : </small>
                            <span class="unitPrice">${community?.buildYear}年 </span>
                            <small class="newFontSize"></small>
                        </h3>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <div class="row">
        <div class="panel-heading">
            集中度分析
        </div>
        <div class="hpanel hgreen">
            <div class="panel-heading hbuilt">
                <div class="panel-tools">
                    <a class="showhide"><i class="fa fa-chevron-up"></i></a>
                </div>
                胜古家园
            </div>

            <div class="panel-body">
                <p class="text-center">风险评级 <span class="text-danger">高风险</span></p>
                <p class="text-center" id="address"><g:link action="circulationAssessment" controller="buildingsRated"  params="[id:'380246589',city:'110100']">地址：${community?.address}</g:link></p>
                <p class="text-center">该小区押品数量占该行总押品数量58%，由于该小区2018年2月20日的负面新闻，导致流通性下降，风险等级为高风险。</p>
                <p class="text-center">建议方案： 观察变现周期的平均值，通过交易活跃度处置押品，尽快调整押品数量集中度。</p>

                <div class="table-responsive">
                    <table cellpadding="1" cellspacing="1" class="table table-striped table-bordered table-hover text-center"  id="esateTable">
                        <caption>环比指数</caption>
                        <thead>
                        <tr>
                            <g:sortableColumn property="externalId" title="挂牌量" class="" params="${params}"/>
                            <g:sortableColumn property="borrName" title="成交量"  class="" params="${params}"/>
                            <g:sortableColumn property="borridCardType" title="成交周期"  class="" params="${params}"/>
                            <g:sortableColumn property="borrIdCardNo" title="价格趋势"  class="" params="${params}"/>
                            <g:sortableColumn property="city" title="租售比"  class="" params="${params}"/>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td class="text-danger">月：-10% <i class="fa fa-level-down"></i></td>
                            <td class="text-danger">月：-10% <i class="fa fa-level-down"></i></td>
                            <td class="text-danger">月：-10% <i class="fa fa-level-down"></i></td>
                            <td class="text-success">月：10% <i class="fa fa-level-up"></i></td>
                            <td class="text-danger">月：-10% <i class="fa fa-level-down"></i></td>
                        </tr>
                        <tr>
                            <td class="text-danger">周：-10% <i class="fa fa-level-down"></i></td>
                            <td class="text-danger">周：-10% <i class="fa fa-level-down"></i></td>
                            <td class="text-danger">周：-10% <i class="fa fa-level-down"></i></td>
                            <td class="text-success">周：10% <i class="fa fa-level-up"></i></td>
                            <td class="text-danger">周：-10% <i class="fa fa-level-down"></i></td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <div class="text-left clearfix">
                    <div class="panel-heading">变现能力</div>
                    <div id="main_1" class="pull-left" style="width: 80%;height:283px;"></div>
                </div>
                <hr>

                <div class="text-left clearfix">
                    <div class="panel-heading">风险趋势</div>
                    <div id="main_2" style="width: 100%;height: 420px;"></div>
                </div>
                <hr>


            </div>

        </div>
    </div>
</div>

<asset:javascript src="echarts/echarts-all-3.js" />
<script type="text/javascript">

    var myChart1 = echarts.init(document.getElementById('main_1'));
    var option1 = {
        tooltip: {
            trigger: 'axis'
        },
        toolbox: {
            show: false,
            feature: {
                dataView: {
                    readOnly: false
                },
                restore: {},
                saveAsImage: {}
            }
        },
        dataZoom: {
            show: false,
            start: 0,
            end: 100
        },
        xAxis: [{
            type: 'category',
            data: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
            name: '时间尺度：变现周期',
            boundaryGap: true,
            axisLine:{
                lineStyle:{
                    color:'#ADADAD',
                }
            }
        }],
        yAxis: [{
            type: 'value',
            scale: true,
            name: '价值尺度：折扣程度',
            boundaryGap: false,
            axisLine:{
                lineStyle:{
                    color:'#ADADAD',
                }
            }
        }
        ],
        series: [{
            data: [1,10,1,10,1,10,1],
            type: 'line',
            smooth: true,
            itemStyle : {
                normal : {
                    lineStyle:{
                        color:'#DDDDDD'
                    }
                }
            }
        },
        {
            data: [10,1,10,1,10,1,10],
            type: 'line',
            smooth: true,
            itemStyle : {
                normal : {
                    lineStyle:{
                        color:'#A3F5A3'
                    }
                }
            }
        }]
    };
    myChart1.setOption(option1);
</script>

<script type="text/javascript">

    var myChart2 = echarts.init(document.getElementById('main_2'));
    var option2 = {
        legend: {
            data: ['押品集中度', '小区评分'],
            textStyle: {
                color:'#ADADAD',
            }
        },
        xAxis: [{
            type: 'category',
            data: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
            axisLine:{
                lineStyle:{
                    color:'#ADADAD',
                }
            }
        }],
        yAxis: [{
            type: 'value',
            scale: true,
            axisLine:{
                lineStyle:{
                    color:'#ADADAD',
                }
            },
        }
        ],
        series: [{
            data: [120, 200, 150, 80, 70, 170, 200],
            name: '押品集中度',
            type: 'bar',
            smooth: true,
            itemStyle : {
                normal : {
                    color:'#DDDDDD'
                }
            }
        },
        {
            data: [140, 180, 90, 80, 50, 100, 120],
            name: '小区评分',
            type: 'bar',
            smooth: true,
            itemStyle : {
                normal : {
                    color:'#A3F5A3'
                }
            }
        }]
    };
    myChart2.setOption(option2);
</script>

</body>
</html>
